<template>
  <div>
      
      <!--
  由于v-on在Student的组件标签上
    所以给Student的实例对象叫vc上绑定了一个事件名
    叫做 shijian。
    如果shijian 被触发，那么就会调用transSchoolName函数 
      -->
      <!-- <Student v-on:shijian="transSchoolName"/> -->
      <!--
        如果你希望在组件实例对象上使用原生的dom事件，需要加上额外的
        修饰符，不然即便你定义的像是原生的dom事件，他也会
        将你这个认为是自定义事件来处理\

        当你定义了native后，这个就会将前面写的认为是原生的dom事件
        并且将这个click定义到Student组件模版最外层的html元素
        我们这里定义的是div，这也是为什么template下
        必须只能定义一个根元素的其中一个原因
      -->
      <Student @click.native="show" @shijian="transSchoolName" @demo="m1"/>
      <!-- <Student @shijian.once="transSchoolName"/> -->
      <School ref="school" :getSchoolName="getSchoolName" />

  </div>
</template>

<script>

import Student from "./components/Student.vue"
import School from "./components/School.vue"

// 从子组件传递参数给父组件
export default {
    name:"App",
    data(){
      return {
        studentName:''
      }
    },
    components:{Student,School},
    methods: {
      getSchoolName(value){
        console.log('获得',value);
        this.studentName = value;
      },
      transSchoolName(){
        console.log('触发了');
      },
      show(){
        alert(123)
      }
    },
    mounted() {
      // 我们也可以定义个钩子函数，在组件实例对象挂载完毕后。
      // 给他掌管的组件实例对象放置自定义的函数
      // 当 shijian 函数触发，就会调用这个方法
      this.$refs.student.$on('shijian',this.transSchoolName)
    
      // 这种写法虽然麻烦，但是很灵活，例如你可以在延迟多少秒再绑定
    
      // 只想触发一次，用法和平时的自定义事件一致
      this.$refs.student.$once('shijian',this.transSchoolName)


      /**
       * 
       * 注意点
       * 也许你觉得上述的写法有些麻烦，但是这里有一个注意点
       * 就是this的问题，我们正常的写法 就是上述写法
       * 毫无疑问，子组件实例对象会将studentName传给父组件
       * 然后回显到data中的studentName中。
       * 
       * 那么我们是否这样这样定义函数
       */
      this.$refs.student.$on('shijian',function(value){
        console.log('获得',value);
        this.studentName = value;
        // 答案是可以这样定义，但是这里的this就不再是App的实例对象
        // 而是student的vc实力对象了
        /**
         * 
         * 也不难理解，这个shijian的事件是在student中触发的，所以
         * 这个this也变成了student
         * 
         */

      })
      // 如果你希望按照上面这样定义，还是可以访问App的组件实例你可以写成箭头函数
      this.$refs.student.$on('shijian',(value)=>{
        console.log('获得',value);
        this.studentName = value;
        // 答案是可以这样定义，但是这里的this就不再是App的实例对象
        // 而是student的vc实力对象了
        /**
         * 
         * 也不难理解，这个shijian的事件是在student中触发的，所以
         * 这个this也变成了student
         * 
         */

      })
    },
}
</script>

<style scoped>

</style>